<template>
  <div class="my">
    <van-empty
      v-if="!isLogged"
      :image="require('../assets/undraw_Access_account_re_8spm.png')"
      description="登录后才能查看噢"
    >
      <van-button
        round
        type="danger"
        color="#ff6a6c"
        class="bottom-button"
        to="/login"
        >立即登录</van-button
      >
    </van-empty>
    <template v-else>
      <van-icon
        name="setting-o"
        size="22"
        color="#fff"
        class="icon"
        @click="isShow = true"
      />
      <div class="header">
        <div class="info" v-if="show">
          <img class="avatar" src="../assets/avatar_01.png" alt />
          <div class="nickname">vue</div>
        </div>
        <div class="info" v-else>
          <van-uploader>
            <div class="avatar">
              <img :src="userInfo.avatar" alt="用户头像" />
            </div>
          </van-uploader>
          <div>{{ userInfo.nickname }}</div>
        </div>
        <van-grid :column-num="4" :border="false">
          <van-cell
            icon="orders-o"
            title="我的订单"
            value="查看全部"
            is-link
            to="/orderlist"
          />
          <van-grid-item icon="pending-payment" text="待付款" />
          <van-grid-item icon="send-gift-o" text="代发货" />
          <van-grid-item icon="logistics" text="待收货" dot/>
          <van-grid-item icon="chat-o" text="待评价" :badge="badge" />
        </van-grid>
      </div>
      <van-cell-group inset class="cell">
        <van-cell icon="star-o" title="我的收藏" is-link to="/collection" />
        <van-cell icon="records" title="收货地址" is-link to="/addresslist" />
        <van-cell icon="eye-o" title="浏览记录" is-link to="/history" />
      </van-cell-group>
      <van-action-sheet
        v-model="isShow"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @select="onSelect"
      />
    </template>
  </div>
</template>

<script>
import {
  Uploader,
  Grid,
  GridItem,
  Cell,
  CellGroup,
  Icon,
  ActionSheet,
  Toast,
  Empty,
  Button,
} from "vant";
import API from "@/utils/api.js";
export default {
  name: "My",
  data() {
    return {
      userInfo: {},
      show: true,
      isShow: false,
      actions: [{ name: "修改信息" }, { name: "退出登录" }],
      isLogged: this.$store.state.token ? true : false,
      badge: 0,
    };
  },
  created() {
    if (localStorage.getItem("token")) {
      this.show = false;
      this.$get(API.GET_AUTH_INFO, {
        token: this.$store.state.token,
      }).then((res) => {
        console.log("用户信息", res);
        if (!res.data) {
          this.show = true;
          console.log("已过期");
        } else {
          this.show = false;
          this.userInfo = res.data;
        }
      });
    }
    this.getList();
  },
  methods: {
    onSelect(item) {
      console.log(item.name);
      if (item.name == "退出登录") {
        this.$post(API.POST_AUTH_LOGOUT, {
          token: this.$store.state.token,
        })
          .then((res) => {
            console.log(res);
            Toast.success("退出成功");
            //调用后台退出登录接口清token
            localStorage.removeItem("token");
            localStorage.removeItem("userInfo");
            this.$store.dispatch("logout");
            this.$router.push("/home");
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (item.name == "修改信息") {
        this.$router.push("/userinfo");
      }
    },
    getList() {
      this.$get(API.GET_ORDER_LIST, {
        token: this.$store.state.token,
        showType: 4,
      }).then((res) => {
        this.badge = res.data.list.length;
      });
    },
  },
  components: {
    [Uploader.name]: Uploader,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [ActionSheet.name]: ActionSheet,
    [Toast.name]: Toast,
    [Empty.name]: Empty,
    [Button.name]: Button,
  },
};
</script>

<style lang="less" scoped>
.my {
  position: absolute;
  margin-top: 20px;
  height: 100%;
  width: 100%;
  overflow-y: hidden;
  color: #444;
  background: linear-gradient(to bottom, #ff6a6c 0%, #f4f4f4 28%);
  display: flex;
  flex-direction: column;
  .van-empty {
    margin-top: 34px;
    .van-empty__image img {
      width: 0;
    }
  }
  .bottom-button {
    width: 160px;
    height: 40px;
  }
  .icon {
    position: relative;
    top: 40px;
    left: 328px;
  }
  .header {
    height: 240px;
    width: 91%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .info {
      margin-left: 14px;
      display: flex;
      align-items: center;
      margin-bottom: 14px;
      img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin-right: 30px;
      }
    }
  }
  .cell {
    margin-top: 10px;
    height: 140px;
    background-color: #fff;
  }
  .van-icon-logistics van-grid-item__icon {
    color: #ff6a6c;
  }
}
</style>